<template>
  <div class="Strategy">
    <!-- 旅游攻略模块 -->
    <div class="left">
      <!-- 左侧菜单 -->
      <div class="menus">
        <div class="menus-item">
          <span>热门城市</span>
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="menus-item">
          <span>推荐城市</span>
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="menus-item">
          <span>奔向海岛</span>
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="menus-item">
          <span>主题推荐</span>
          <i class="el-icon-arrow-right"></i>
        </div>

        <!-- 左侧子菜单 -->
        <div class="sub-menus">
          <ul>
            <li>
              <a href="#">
                <i>1</i>
                <strong>北京</strong>
                <span>世界著名古都和现代化国际城市</span>
              </a>
            </li>
            <li>
              <a href="#">
                <i>2</i>
                <strong>北京</strong>
                <span>世界著名古都和现代化国际城市</span>
              </a>
            </li>
            <li>
              <a href="#">
                <i>3</i>
                <strong>北京</strong>
                <span>世界著名古都和现代化国际城市</span>
              </a>
            </li>
            <li>
              <a href="#">
                <i>4</i>
                <strong>北京</strong>
                <span>世界著名古都和现代化国际城市</span>
              </a>
            </li>
            <li>
              <a href="#">
                <i>5</i>
                <strong>北京</strong>
                <span>世界著名古都和现代化国际城市</span>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div class="recommend">
        <div class="recommend-City">推荐城市</div>
        <img
          src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2630562418,1156663217&fm=26&gp=0.jpg"
          alt
        />
      </div>
    </div>
    <div class="right">222</div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
//页面根的样式
.Strategy {
  width: 1000px;
  height: 600px;
  padding-top: 20px;
  margin: 0 auto;
  //左边div的样式
  .left {
    margin-right: 50px;
    float: left;
    width: 260px;

    .menus {
      position: relative;
      margin-bottom: 10px;
      border: 1px solid #ddd;
      border-right: none;
      border-bottom: none;
      .menus-item {
        padding: 0 20px;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        color: #555;
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #ddd;
        z-index: 2;

        i {
          float: right;
          padding-top: 15px;

          .el-icon-arrow-right {
            color: #cccccc;
          }
        }

        &:not(:first-child) {
          margin-top: -1px;
        }

        &:hover {
          color: orange;
          border-right: 1px solid white;
        }
      }

      .sub-menus {
        width: 350px;
        position: absolute;
        // border: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        top: -1px;
        left: 258.5px;

        li {
          height: 40px;
          line-height: 40px;
          padding: 0 20px;
          font-size: 14px;
          position: relative;
          z-index: 1;

          &:nth-child(5) {
            border-left: 1px solid #ddd;
          }
          i {
            color: orange;
            font-size: 24px;
            font-style: italic;
          }

          strong {
            margin: 0 10px;
            color: orange;
            font-weight: 400;
          }

          span {
            color: #999;
          }
        }
      }
    }

    .recommend {
      .recommend-City {
        font-size: 14px;
        padding: 10px 0;
        margin-bottom: 10px;
        border-bottom: 1px solid #c4c4c4;
      }

      img {
        width: 260px;
        height: 174px;
      }
    }
  }

  //右边div的c样式
  .right {
    float: left;
    width: 690px;
    background-color: rgb(243, 202, 178);
  }
}
</style>